<template>
  <div class="test3">
    <p>Information:num111:{{num}}</p>
    <p>Information:num1:{{num1}}</p>
    <p>Information:newNum:{{newNum}}</p>
    <button @click="onnum">num修改</button>
    <button @click="gbname">修改name</button>
    <button @click="gbage">修改age</button>

  </div>
</template>

<script>
export default {
  name: 'test3-page',
  props: {},
  data: function () {
    return {
      message: 'test3',
    }
  },
  computed:{
    num:{
      get(){
        return this.$store.state.num
      },
      set(val){
        this.$store.commit('changeNum',val)
      }
    },
    newNum(){
      return this.$store.getters.newNum
    },
    num1(){
      return this.$store.state.num1
    },

    name(){
      return this.$store.state.userInfo.name+'666'
    },
    age(){
      return this.$store.state.userInfo.age+'777'
    },
    idCard(){
      return this.$store.state.userInfo.idCard+'888'
    },

  },
  methods: {
    onnum(){
      this.num++
    },
    gbage() {
      console.log('修改age')
      // console.log($store.state.userInfo.age)
      // $store.state.userInfo.age='修改后的age'
      this.$store.commit('userInfo/changeAge','修改后的age数据')

    },
    gbname(){
      console.log('修改name')
      // console.log($store.state.userInfo.name)
      // $store.state.userInfo.name='修改后的name'
      this.$store.commit('userInfo/changeName','修改后的name数据')
    },
  }
}
</script>

<style scoped>
</style>

